<template>
  <view class="header-section">
    <view class="header-content">
      <view class="main-title">
        <!-- <image :src="statusTrans.imageSrc" alt=""></image> -->
        <!-- 已付款, 未付款,待收货 -->
        <text
          v-if="
            (order.trade_status == 0 ||
              order.trade_status == 2 ||
              order.trade_status == -1) &&
            order.is_offline != 1
          "
          class="iconfont icon-clock"
          style="color: #f0250e; font-size: 54rpx"
        ></text>
        <!-- 已完成 -->
        <text
          v-else-if="order.trade_status == 3 && order.is_offline != 1"
          class="iconfont icon-success"
          style="color: #f0250e; font-size: 54rpx"
        ></text>
        <!-- 已取消 -->
        <text
          v-else-if="order.trade_status == 1 && order.is_offline != 1"
          class="iconfont icon-prompt"
          style="color: #f0250e; font-size: 54rpx"
        ></text>
        <text>{{ statusTrans.statusStr }}</text>
      </view>
      <view class="subtitle" v-if="statusTrans.str">{{ statusTrans.str }}</view>
      <view
        class="order-price-box"
        v-if="order.pay_type != 2 && order.trade_status == -1"
      >
        <text>{{ $t("order.needPay") }}：￥</text>
        <text>{{ order.pay_price | priceBeforeZero }}</text>
        <text>{{ order.pay_price | priceAfterZero }}</text>
        <!-- <text style="margin-left:10rpx;">倒计时:{{h}}:{{m}}:{{s}}</text> -->
      </view>
      <view class="flex-box">
        <view
          class="operate-btn"
          v-if="statusTrans.btnWord && statusTrans.btnWord != $t('order.warn')"
          @click="handleBtn"
          >{{ statusTrans.btnWord }}</view
        >
		<!-- 好友代付 -->
      <!--  <view
          class="friend-pay"
          v-if="order.trade_status == -1 && order.pay_type != 2"
          @click="gotoFriendPay"
          >{{$t('order.fri')}}</view
        > -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {
    statusTrans() {
      //   订单状态，-1:默认，0:待发货，1:已取消，2:已发货，3:已确认
      let str = "", //订单注释
        btnWord = "", //按钮文本
        statusStr = ""; //订单状态title
      if (this.order.trade_status == -1 && this.order.pay_type != 2) {
        statusStr = this.$t('order.wait');
        btnWord = this.$t('order.toPay');
      }
      // 待发货,  或者货到付款,且状态未支付
      if (
        this.order.trade_status == 0 ||
        (this.order.trade_status == -1 && this.order.pay_type == 2)
      ) {
        str = this.$t('order.toDo');
        statusStr = this.$t('order.waitSend');
        btnWord = this.$t('order.warn');
      }
      if (this.order.trade_status == 1) {
        statusStr = this.$t('shop.cancled');
        btnWord = "";
        // if (this.order.is_delivery == 1 && this.order.delivery_info) {
        str = this.$t('order.canReason') + "：" + this.order.cancel_reason[6];
        // }
      }
      if (this.order.trade_status == 2) {
        statusStr = this.$t('order.waitTake');
        str = "";
        btnWord = "";
      }
      if (this.order.trade_status == 3) {
        statusStr = this.$t('person.status4');
        str = this.$t('order.taked');
        btnWord = "";
      }

      if (this.order?.is_offline == 1 && this.order.is_pay == 1) {
        statusStr = `${this.$t('order.foodCode')}：${this.order.food_code}`;
        str = this.$t('order.prepare');
      }

      return {
        str,
        btnWord,
        statusStr,
      };
    },
  },
  methods: {
    gotoFriendPay() {
      this.$utils.toUrl(
        `/order/pay-another/pay-another?orderId=${this.order.order_id}`
      );
      return;
    },
    handleBtn() {
      this.$emit("handleOrderTopBtn", {
        id: this.order.order_id,
        status: this.order.trade_status,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-section {
  width: 100%;
  padding-bottom: 30rpx;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: PingFang SC;
  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .main-title {
      margin-bottom: 26rpx;
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      height: 56rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: #f0250e;
      .iconfont {
        margin-right: 5rpx;
      }
    }

    .subtitle {
      text-align: center;

      line-height: 40rpx;
      font-size: 28rpx;
    }

    .order-price-box {
      display: flex;
      justify-content: center;
      align-items: baseline;
      font-size: 28rpx;
      margin-bottom: 32rpx;
    }

    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .friend-pay {
        width: 200rpx;
        height: 70rpx;
        border: 1px solid #bcbcbc;
        border-radius: 35rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        margin-left: 24rpx;
      }
    }

    .operate-btn {
      width: 200rpx;
      height: 70rpx;
      background: #f0250e;
      border-radius: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
